<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>

<body>
    <div data-ng-app="myApp" data-ng-controller="myCtrl">
        <form novalidate>
            <h3>文本输入</h3>
            <div>
                <input type="text" data-ng-model="textValue" placeholder="请输入文本" /><br />
                <span>你输入的文本：{{textValue}}</span>
            </div>
            <h3>复选框checkbox</h3>
            <div>
                选择显示/隐藏：
                <input type="checkbox" data-ng-model="checkValue" /><br />
                <h4 data-ng-show="checkValue">该文本显示</h4>
            </div>
            <h3>单选框</h3>
            <div>
                选择一个选项：
                <input type="radio" value='dogs' data-ng-model="radioValue" />Dogs
                <input type="radio" value='cats' data-ng-model="radioValue" />Cats
                <input type="radio" value='birds' data-ng-model="radioValue" />Birds
                <div data-ng-switch="radioValue">
                    <div data-ng-switch-when="dogs">
                        <h4>Dogs</h4>
                    </div>
                    <div data-ng-switch-when="cats">
                        <h4>Cats</h4>
                    </div>
                    <div data-ng-switch-when="birds">
                        <h4>Birds</h4>
                    </div>
                </div>
            </div>
            <h3>下拉菜单</h3>
            <div>
                选择一个选项：
                <select data-ng-model="selectValue">
                    <option value=""></option>
                    <option value="dogs">Dogs</option>
                    <option value="cats">Cats</option>
                    <option value="birds">Birds</option>
                </select>
                <div data-ng-switch="selectValue">
                    <div data-ng-switch-when="dogs">
                        <h4>Dogs</h4>
                    </div>
                    <div data-ng-switch-when="cats">
                        <h4>Cats</h4>
                    </div>
                    <div data-ng-switch-when="birds">
                        <h4>Birds</h4>
                    </div>
                </div>
            </div>
            <h3>综合</h3>
            <div>
                First Name: <br />
                <input type="text" data-ng-model="user.firstName" /><br />
                Last Name: <br />
                <input type="text" data-ng-model="user.lastName" /><br />
                <button data-ng-click="reset()">Reset</button>
                <p>form value:{{user}}</p>
                <p>origin value:{{origin}}</p>
            </div>
        </form>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="form.js"></script>
</body>

</html>
